<template>
  <div id="user">
    <div class="mt15">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="个人基本信息" name="first">
          <p class="f18">个人基本信息</p>
          <Information></Information>
        </el-tab-pane>
        <el-tab-pane label="安全设置" name="second">
          <p class="f18">安全设置</p>
          <Safe></Safe>
        </el-tab-pane>
        <el-tab-pane label="收货地址管理" name="third">
          <p class="f18">收货地址管理</p>
          <Adress></Adress>
        </el-tab-pane>
        <el-tab-pane label="我的商品" name="fourth">
          <p class="f18">我的商品</p>
          <Goods></Goods>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import Information from "../personal-center/information";
import Safe from "../personal-center/safe";
import Adress from "../personal-center/adress";
import Goods from "../personal-center/goods";

export default {
  data() {
    return {
      activeName: "first"
    };
  },
  methods: {
    handleClick(tab, event) {
      // console.log(tab, event);
    }
  },
  components: {
    Information,
    Safe,
    Adress,
    Goods
  }
};
</script>

<style scoped>
#user {
  width: 1080px;
  min-height: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* 标题 */
.el-tab-pane {
  float: left;
  width: 100%;
}
.el-tab-pane p {
  float: left;
}
</style>
